﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SIPO.master" AutoEventWireup="false" CodeFile="monitoringDebiturJatuhTempo.aspx.cs" Inherits="SIPO.Web.lists.Transaction.monitoringDebiturJatuhTempo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="body" Runat="Server">
<link type="text/css" rel="stylesheet" href="<%= ResolveUrl("~/styles/ui.jqgrid.css") %>" />
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/i18n/grid.locale-id.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/jquery.jqGrid.min.js") %>"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <table>
        <tr>
            <td>
                <asp:RadioButton ID="rbBulan" runat="server" GroupName="groupRbPeriode" Checked="True" />
            </td>
            <td>Periode per</td>
            <td>:</td>
            <td>
                <asp:TextBox ID="txtPeriode" runat="server"></asp:TextBox>         
            </td>
        </tr>
        <tr>
            <td>
                <asp:RadioButton ID="rbPeriode" runat="server" GroupName="groupRbPeriode" />
            </td>
            <td>Periode antara</td>
            <td>:</td>
            <td>
                <asp:TextBox ID="txtPeriodeAwal" runat="server"></asp:TextBox>
                -
                <asp:TextBox ID="txtPeriodeAkhir" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr align="right">
            <td colspan='4'>
                <input type="button" id="btnCari" value="Cari" />
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <table id="table" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll">
    </div>
    <br />
    <div id="dialog1" title="Default dialog">
    </div>
    <script type="text/javascript">
        // format tanggal dengan datepicker
        $("#<%= txtPeriode.ClientID  %>").datepicker({ showWeek: true, showButtonPanel: true,
            changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy',
            numberOfMonths: 1
        });

        $('#<%= txtPeriode.ClientID %>').inputmask("d/m/y", { "placeholder": "dd/mm/yyyy" });

        $("#<%= txtPeriodeAwal.ClientID  %>").datepicker({ showWeek: true, showButtonPanel: true,
            changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy',
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#<%= txtPeriodeAkhir.ClientID %>").datepicker("option", "minDate", selected)
            }
        });

        $('#<%= txtPeriodeAwal.ClientID %>').inputmask("d/m/y", { "placeholder": "dd/mm/yyyy" });

        $("#<%= txtPeriodeAkhir.ClientID  %>").datepicker({ showWeek: true, showButtonPanel: true,
            changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy',
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#<%= txtPeriodeAwal.ClientID %>").datepicker("option", "maxDate", selected)
            }
        });

        $('#<%= txtPeriodeAkhir.ClientID %>').inputmask("d/m/y", { "placeholder": "dd/mm/yyyy" });
        
        var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Transaction/recDemandhandler.ashx?method=getdatadebiturjatuhtempo") %>';

        function tampilkanGrid(parameter) {
            $('#table').jqGrid({
                url: handlerUrl + parameter,
                datatype: 'json',
                colNames: ['No.', 'Debitur', 'Jenis Pungutan', 'Nilai', 'Tgl. Jatuh Tempo'],
                colModel: [
                    { name: 'recDebtor.DebtorID', index: 'DebtorID', width: 20, search:false },
                    { name: 'recDebtor.DebtorName', index: 'recDebtor.DebtorName', width: 130 },
                    { name: 'recTransactionType.TransTypeName', index: 'recTransactionType.TransTypeName', width: 130 },
                    { name: 'Value', index: 'Value', formatter: 'currency', align: 'right', formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2 }, width: 150 },
                    { name: 'DueDate', index: 'DueDate', align: 'center', width: 100, formatter: 'date', formatoptions: { newformat: 'd M Y'} },
           	],
                rowNum: 10,
                id: 'DebtorID',
                multiselect: false,
                rowList: [5, 10, 15, 20],
                pager: '#pager',
                sortname: 'DebtorName',
                sortorder: "asc",
                viewrecords: true,
                jsonReader: { repeatitems: false },
                height: '100%',
                caption: 'Monitoring Debitur Jatuh Tempo',
                ajaxGridOptions: { cache: false }

            });

            $("#table").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, searchtext: 'Search', refreshtext: 'Refresh' },
        {}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });
        }
        
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            //defaultnya radio button bulan dicek
            //$('#<%= txtPeriodeAwal.ClientID %>').attr('disabled', 'disabled');
            //$('#<%= txtPeriodeAkhir.ClientID %>').attr('disabled', 'disabled');
            //$('#<%= txtPeriode.ClientID %>').removeAttr('disabled');
            var param;

            if ('<%= Request.Params["Bulan"] %>' != "") {

                param = '&Bulan=<%= Request.Params["Bulan"] %>';
                tampilkanGrid(param);
            } else if ('<%= Request.Params["PeriodeAwal"] %>' != "" && '<%= Request.Params["PeriodeAkhir"] %>' != "") {

                param = '&PeriodeAwal=<%= Request.Params["PeriodeAwal"] %>&PeriodeAkhir=<%= Request.Params["PeriodeAkhir"] %>';
                $('#<%= rbPeriode.ClientID %>').attr('checked', true);
                tampilkanGrid(param);
            } else {
                tampilkanGrid('');
            }

            $('#btnCari').click(function () {
                if ($('#<%= rbBulan.ClientID %>').is(':checked')) {
                    var bulan = $('#<%= txtPeriode.ClientID %>').val();

                    window.location = 'monitoringDebiturJatuhTempo.aspx?menuid=75&Bulan=' + bulan;
                }

                if ($('#<%= rbPeriode.ClientID %>').is(':checked')) {
                    var periodeAwal = $('#<%= txtPeriodeAwal.ClientID %>').val();
                    var periodeAkhir = $('#<%= txtPeriodeAkhir.ClientID %>').val();

                    window.location = 'monitoringDebiturJatuhTempo.aspx?menuid=75&PeriodeAwal=' + periodeAwal + '&PeriodeAkhir=' + periodeAkhir;

                }
            });


            $('#<%= rbBulan.ClientID %>').change(function () {
                if ($('#<%= rbBulan.ClientID %>').is(':checked')) {
                    $('#<%= txtPeriodeAwal.ClientID %>').attr('disabled', 'disabled');
                    $('#<%= txtPeriodeAkhir.ClientID %>').attr('disabled', 'disabled');
                    $('#<%= txtPeriode.ClientID %>').removeAttr('disabled');
                }
            });

            $('#<%= rbPeriode.ClientID %>').change(function () {
                if ($('#<%= rbPeriode.ClientID %>').is(':checked')) {
                    $('#<%= txtPeriodeAwal.ClientID %>').removeAttr('disabled');
                    $('#<%= txtPeriodeAkhir.ClientID %>').removeAttr('disabled');
                    $('#<%= txtPeriode.ClientID %>').attr('disabled', 'disabled');
                }
            });
        });
    </script>
</asp:Content>

